
$(function () {
    // 加载文章分类
    var form = layui.form
    var layer = layui.layer
    function atcType() {
        $.ajax({
            type: "get",
            url: "/my/article/cates",
            success: function (response) {
                // console.log(response);
                if (response.status != 0) {
                    return layer.msg('获取文章分类失败!')
                }
                var type = template('atc_type', response)
                $('#secte').html(type);
                // layyui渲染下拉列表数据的方法，一定要加上。
                form.render()
            }
        });
    }
    atcType();

    // 初始化富文本区域
    initEditor();



    // 裁剪区的js
    // 1. 初始化图片裁剪器
    var $image = $('#image')

    // 2. 裁剪选项
    var options = {
        aspectRatio: 400 / 280,
        preview: '.img-preview'
    }

    // 3. 初始化裁剪区域
    $image.cropper(options)

    // 使用事件代理完成选择封面按钮
    $('#changeImg').on('click', function () {
        $('#imgUp').click();
    })
    // 监听用户选择图片
    $('#imgUp').on('change', function (e) {
        // console.log(e);
        var file = e.target.files;
        // 根据文件创建对应的URL地址
        var newimgUrl = URL.createObjectURL(file[0]);
        // 为裁剪区重新设置图片
        $image.cropper('destroy')  //销毁旧的裁剪区域
            .attr('src', newimgUrl)//重新设置图片路径
            .cropper(options)//重新初始化裁剪区域
    })
    //定义一个发布状态
    var art_state = '已发布';
    $('.draft').on('click', function () {
        art_state = "草稿";
    })

    // 为表单创建submit事件
    $('#form_add').on('submit', function (e) {
        // alert('11')
        e.preventDefault()
        // 2. 基于 form 表单，快速创建一个 FormData 对象
        var fd = new FormData($(this)[0])
        console.log(fd);
        // 循环这个对象
        // 新增一个状态属性
        fd.append('state', art_state);
        // 将 封面裁剪过后的图片输出为一个文件对象
        $image
            .cropper('getCroppedCanvas', {
                // 创建一个 Canvas 画布
                width: 400,
                height: 280
            })

            .toBlob(function (blob) {
                // 将 Canvas 画布上的内容，转化为文件对象
                // 得到文件对象后，进行后续的操作
                // 5. 将文件对象，存储到 fd 中
                fd.append('cover_img', blob)
                // 6. 发起 ajax 数据请求
                publishArticle(fd)
            })
        // fd.forEach(function (value, k) {
        //     console.log(k, value);

        // })
    })
    // 定义一个发布文章的按钮
    function publishArticle(fd) {
        // 发送请求
        $.ajax({
            type: "post",
            url: "/my/article/add",
            data: fd,
            // 使用formdata时必须加上   contentType: false,
            // processData: false,
            contentType: false,
            processData: false,
            success: function (response) {
                if (response.status != 0) {
                    return layer.msg('文章发布失败！')
                }
                layer.msg('文章发布成功！');
                location.href = "/atcitle/art_list.html"
            }
        });
    }



})